import ApexCharts from 'apexcharts';
import { useEffect } from 'react';
import { Box } from '@material-ui/core';

const options = {
  chart: {
    type: 'line',
  },
  series: [
    {
      name: 'sales',
      data: [30, 40, 35, 50, 49, 60, 70, 91, 125],
    },
  ],
  xaxis: {
    categories: [1991, 1992, 1993, 1994, 1995, 1996, 1997, 1998, 1999],
  },
};

export const Charts = () => {
  useEffect(() => {
    const chart = new ApexCharts(document.querySelector('#graph'), options);
    chart.render();
  }, []);

  return (
    <Box
      id="graph"
      sx={{
        width: '100%',
      }}
    ></Box>
  );
};
